<template>
    <div class="map-popup-box popup-custom">
        <!-- <div class="station-popup" :style="data.type == 0 ? { height: '450px' } : { min-height: '650px' }"> -->
        <div class="station-popup" :style="data.type == 0 ? { height: '450px' } : { height: '700px' }">
            <div class="station-headline" :class="stationIndex == 0 ? 'station-headline1' : 'station-headline2'">
                <div class="flex-items station-headline-box flex-s">
                    <text :style="data.type == 0 ? { color: '#F1BF35' } : { color: '#39BCB8' }">{{ data.type == 0 ? '接收中' :
                        '发送中'
                    }}</text>
                    <img v-if="data.type == 0" class="station-headline-img" src="@/assets/img/js.png" />
                    <img v-else class="station-headline-img" src="@/assets/img/fs.png" />
                    <img v-show="stationIndex == 0" class="station-icon" src="@/assets/img/station-headline.png" />
                    <img v-show="stationIndex == 1" class="station-icon" src="@/assets/img/station-headline2.png" />
                    <div class="station-icon-text" :style="stationIndex == 0 ? { color: '#F1BF35' } : { color: '#39BCB8' }">
                        <text v-if="stationIndex == 0" class="flex">连续<br />探测</text>
                        <text v-if="stationIndex == 1" class="flex">业务<br />模式</text>

                    </div>
                </div>
                <img class="station-close" src="@/assets/img/close-fill.png" @click="close" />
            </div>
            <div>

                <div class="station-body">
                    <div class="station-name-box">
                        <div class="station-name" :class="stationIndex == 0 ? 'station-name1' : 'station-name2'">
                            {{ data.name }}
                        </div>
                    </div>
                    <div class="station-button-box flex">
                        <div class="station-button flex-left cursor" :class="stationIndex == 0 ? 'station-button-opt' : ''"
                            @click="stationIndex = 0">工作状态</div>
                        <div class="station-button flex-left cursor" :class="stationIndex == 1 ? 'station-button-opt' : ''"
                            @click="stationIndex = 1">基础设置</div>
                    </div>
                    <div v-show="stationIndex == 0"><!--工作状态-->
                        <div class="station-message">
                            <div class="station-message-ul flex-s">
                                <div class="station-message-li flex-items">
                                    <img v-if="data.type == 1" class="station-img" src="@/assets/img/station1.png">
                                    <div v-if="data.type == 1" class="station-text">天调成功</div>
                                </div>
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station2.png">
                                    <span class="station-text">状态:在线</span>
                                </div>
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station3.png">
                                    <span class="station-text">驻波:0.3</span>
                                </div>
                            </div>
                            <div class="station-message-ul flex-items">
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station4.png">
                                    <span class="station-text">温度:32℃</span>
                                </div>
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station5.png">
                                    <span class="station-text">电流:2.3A</span>
                                </div>
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station6.png">
                                    <span class="station-text">电压:2.2V</span>
                                </div>
                            </div>
                            <div class="station-message-ul flex-items">
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station7.png">
                                    <span class="station-text">功率:8高</span>
                                </div>
                                <div class="station-message-li flex-items">
                                    <img class="station-img" src="@/assets/img/station8.png">
                                    <span class="station-text">频率:2.1MHz</span>
                                </div>
                                <div class="station-message-li flex-items">
                                </div>
                            </div>

                            <div class="station-message-ul flex">
                                <div class="station-message-li2 flex-items">
                                    <img class="station-img" src="@/assets/img/station9.png">
                                    <span class="station-text2">39°52′48″N,116°24′20″E（重庆万州）</span>
                                </div>
                            </div>

                        </div>

                        <div class="station-execute flex-items">
                            <img src="@/assets/img/station10.png" />
                            当前执行文件：重庆万州电台连续测试
                        </div>

                        <div class="station-hint">
                            {{ data.type == 0 ? '发送信息' : '接收数据实时频谱图' }}
                        </div>

                        <div v-show="data.type == 1">
                            <Chart></Chart>
                        </div>

                        <div v-show="data.type == 0">
                            <div class="station-voice flex-s">
                                <div>
                                    <div class="station-voice-box flex-s">
                                        <div class="voice-text">5’</div>
                                        <img class="voice-volume" src="@/assets/img/volume.png" />
                                    </div>
                                    <div class="station-voice-schedulep flex-s">
                                        <!-- <button @click="startProgress">{{ progressBarWidth }}</button> -->
                                        发送中 80%...
                                        <div class="station-voice-schedulep-s">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-show="data.type == 1">
                            <div class="station-frequency">

                            </div>

                            <div class="station-hint">
                                接收信息
                            </div>
                            <div class="station-voice flex-s">
                                <div>
                                    <div class="station-voice-box flex-s">
                                        <div class="voice-text flex-left" style="width: 350px;">文本内容...</div>
                                    </div>
                                    <div class="station-voice-schedulep flex-s">
                                        <!-- <button @click="startProgress">{{ progressBarWidth }}</button> -->
                                        发送中 80%...
                                        <div class="station-voice-schedulep-s">

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>




                    </div>


                    <div v-show="stationIndex == 1" class="station-basics"><!--基础设置-->
                        <el-form ref="form"  label-width="120px" >
                            <el-form-item label="版本:">
                                <div class="p_20">V1</div>
                            </el-form-item>
                            <el-form-item label="节点名称:">
                                <div class="node-name p_20">{{ data.name }}</div>
                            </el-form-item>
                            <el-form-item label="节点位置:">
                                <div class="p_20">{{ data.location }}</div>
                            </el-form-item>
                        </el-form>
                    </div>



                </div>




                <div class="station-confirm">
                    <img class="station-button-img cursor" src="@/assets/img/button.png">
                    <div class="station-button-text cursor">确定</div>

                </div>
                <div class="station-bg-right"></div>


            </div>




        </div>
    </div>
</template>
  
<script>
import Chart from '@/components/Chart/index.vue'
export default {
    props: {
        data: {
            type: Object,
            default: null,
        },
        strokeWidth: {
            type: Number,
            default: 10,
        },
        percentage: {
            type: Number,
            default: 50,
        },
        color: {
            type: String,
            default: "#3498db",
        },
        backgroundColor: {
            type: String,
            default: "#5B5F73",
        },
        text: {
            type: String,
            default: '在线电台',
        },
    },

    data() {
        return {
            stationIndex: 0,
            progress: 30,
            progressBarWidth: '0%',
            intervalId: null,
        }
    },
    components: {
        Chart,
    },
    methods: {
        // setstationIndex
        close() {
            this.$emit('closeMapPopup', false)
        },
        startProgress() {
            // 防止多次点击按钮导致多个定时器同时执行
            if (this.intervalId === null) {
                this.intervalId = setInterval(() => {
                    if (this.progress < 100) {
                        this.progress += 1;
                        this.progressBarWidth = `${this.progress}%`;
                    } else {
                        clearInterval(this.intervalId);
                        this.intervalId = null;
                    }
                }, 500);
            }
        },
    },
    computed: {

    },
};
</script>
  
<style lang="scss">
.map-popup-box {
    .station-popup {
        color: white;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 450px;

        background: #293145;

        .station-headline1 {
            background-image: url(../../assets/img/station-box.png);

        }

        .station-headline2 {
            background-image: url(../../assets/img/station-box2.png);

        }

        .station-headline {
            position: absolute;
            height: 320px;
            width: 510px;
            top: -39px;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;

            .station-headline-box {
                position: absolute;
                right: 150px;
                top: 25px;
                font-size: 18px;
                color: #F1BF35;

                .station-headline-img {
                    margin-left: 5px;
                    width: 12px;
                    height: 12px;
                }

                .station-icon {
                    position: absolute;
                    width: 120px;
                    height: 74px;
                    top: 20px;
                    left: -25px;
                }

                .station-icon-text {
                    position: absolute;
                    width: 100px;
                    height: 74px;
                    top: 35px;
                    right: -140px;

                    text {
                        font-size: 20px;
                    }
                }
            }

            .station-close {
                position: absolute;
                width: 25px;
                height: 25px;
                right: 1px;
                top: 30px;
            }
        }

        .station-body {
            position: absolute;
            z-index: 8888;
            margin-top: 9px;
        }

        .station-name-box {
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            width: 250px;
            height: 41px;

            .station-name {
                position: absolute;
                width: 250px;
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                color: white;
                padding-left: 20px;
            }

            .station-name1 {
                background: #F1BF35;

            }

            .station-name2 {
                background: #2BA0C8;
            }

            .station-name1::before {
                content: '';
                position: absolute;
                top: -0.5px;
                left: 269px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 28px 41px 0;
                /* 控制斜角的大小和方向 */
                border-color: transparent transparent #F1BF35 transparent;
                /* 设置斜角颜色 */
            }

            .station-name2::before {
                content: '';
                position: absolute;
                top: -0.5px;
                left: 269px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 28px 41px 0;
                /* 控制斜角的大小和方向 */
                border-color: transparent transparent #2BA0C8 transparent;
                /* 设置斜角颜色 */
            }
        }

        .station-button-box {
            width: 299px;
            background: linear-gradient(to right, #2C334C, #1D2435);

            .station-button {
                width: 100px;
                text-align: center;
                height: 25px;
                font-size: 14px;
                line-height: 25px;
                margin: 0;
            }

            .station-button-opt {
                border-bottom: #60EAFF 2px solid;
            }

        }

        .station-message {
            width: 450px;
            background: linear-gradient(to right, #313B53, #272F43);
            height: 181px;
            border-top: black 2px solid;

            .station-message-ul {
                width: 100%;
                padding-left: 10px;

                .station-message-li {
                    margin: 10px 0;
                    width: 160px;
                    height: 20px;

                    .station-img {
                        height: 18px;
                        width: 18px;
                        margin-right: 5px;
                        margin: 2.5px 5px;
                    }

                    .station-text {
                        text-align: center;
                        color: #2BA0C8;
                        font-size: 20px !important;
                        line-height: 20px;
                    }



                }

                .station-message-li2 {
                    margin: 10px 0;
                    height: 20px;
                    padding-left: 4px;


                    .station-img {
                        height: 18px;
                        width: 18px;
                        margin: 2.5px 5px;
                        margin-left: 2px;

                    }

                    .station-text2 {
                        text-align: center;
                        color: #9A9DAA;
                        font-size: 18px !important;
                        line-height: 18px;
                    }

                }

            }
        }

        .station-execute {
            padding: 0 20px;
            background: #2CA6E0;
            height: 40px;
            color: #F9FAFA;

            img {
                margin-right: 10px;
                width: 19px;
                height: 15px;
            }
        }

        .station-hint {
            padding: 5px 20px;
            background: #171D2C;
            // background: linear-gradient(to right, #313B53, #272F43);
            color: #575D73;
        }

        .station-voice {
            .station-voice-box {
                background: #3C4257;
                width: 400px;
                height: 50px;
                margin-top: 20px;

                .voice-text {
                    color: #9A9DAA;
                    font-size: 20px;
                    margin: 0;
                }

                .voice-volume {
                    width: 30px;
                    height: 30px;
                    margin: 0;
                }
            }

            .station-voice-schedulep {
                position: absolute;
                width: 400px;
                height: 20px;

                background: #171D2C;

                .station-voice-schedulep-s {
                    position: absolute;
                    height: 20px;
                    top: 0;
                    left: 0;
                    background: #546075;
                    width: 300px;
                }

            }

        }

        .station-confirm {
            position: absolute;
            bottom: -35px;
            left: 0;
            z-index: 999;

            .station-button-img {
                width: 260px;
                height: 60px;
            }

            .station-button-text {
                position: absolute;
                top: 20px;
                left: 100px;
                color: #2BA0C8;
                font-size: 20px;
            }

        }

        .station-bg-right {
            position: absolute;
            background: #293145;
            // background: white;
            width: 400px;
            height: 20px;
            right: 0;
            bottom: -11px;
        }

        .station-frequency {
            // height: 220px;
            width: 400px;
            // background: blanchedalmond;
        }

        .station-basics {
            background: #293145;
            height: 350px;
            width: 450px;
            margin-top: 20px;
            font-size: 16px;
            .el-form .el-form-item__label{
                font-size: 16px;
                color: #9A9DAA;
            }
            .el-form-item__content{
                font-size: 16px;
                .node-name{
                    background: #394760;
                    width: 200px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 20px;
                }
            }
        }

    }

}</style>
  